<template>
  <div v-if="loading" class="loading">
    <img src="../../../assets/pkq1.gif" alt="" />
    <p>搜索中....</p>
  </div>
  <div class="empty" v-if="!flightNumber">
    <div>
      <img src="..//..//..//assets/no-result.png" alt=""
        style="width: 200px;height: 200px;margin: auto;margin-left: 20px; margin-top: 30px;">
      <div style="margin: auto;margin-left: 10px;">
        未查询到航班，请修改条件重新查询
      </div>
    </div>
  </div>
  <div class="item" v-if="!loading && flightNumber != null">
    <div class="item1">
      <img :src="flightNumber.companyLogos" />
      <span class="font1">
        {{ flightNumber.company + flightNumber.flightNumber }}
      </span>
      <span class="font2" :style="stateColor">{{ flightStatus }}</span>
    </div>
    <hr class="line" />
    <div class="item2">
      <div class="item2-1">
        <span class="font3">({{ flightNumber.upCity }}){{ flightNumber.upAirportName }}</span>
        <span class="font4">({{ flightNumber.downCity }}){{ flightNumber.downAirportName }}</span>
      </div>
      <div class="item2-1">
        <span class="font5">预计{{ starDate }}</span>
        <span style="
            position: absolute;
            color: #999;
            left: 50%;
            transform: translate(-50%);
          ">全程{{ flightNumber.distance }}公里</span>
        <span class="font6">预计{{ endDate }}</span>
      </div>
      <div class="item2-1">
        <span class="font7">{{ flightNumber.starTime }}</span>
        <div style="
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
          ">
          <el-icon size="25px">
            <LocationFilled />
          </el-icon>
          <img src="..//..//..//assets/plane.png" style="width: 35px; height: 35px" v-if="flightStatus == '航班计划'" />
          >>>>>>><img src="..//..//..//assets/plane.png" style="width: 35px; height: 35px"
            v-if="flightStatus == '航班起飞'" />>>>>>>>
          <img src="..//..//..//assets/plane.png" style="width: 35px; height: 35px" v-if="flightStatus == '航班抵达'" />
          <el-icon size="25px">
            <LocationFilled />
          </el-icon>
        </div>
        <span class="font8">{{ flightNumber.endTime }}</span>
      </div>
      <div class="item2-1">
        <span class="font5">原计划&nbsp;{{ flightNumber.starTime }}</span>
        <span class="font6">原计划&nbsp;{{ flightNumber.endTime }}</span>
      </div>
    </div>
    <div style="
        top: 160px;
        right: 480px;
        width: 1px;
        height: 300px;
        background: darkgray;
        position: absolute;
      "></div>
    <div class="item3">
      <div class="item3-1">
        <span style="font-size: 20px; margin: 20px">行李托运</span>
        <div style="width: 1px; height: 60px; background: darkgray"></div>
        <h2 style="margin-left: 20px">
          5Kg<el-icon size="25px">
            <MessageBox />
          </el-icon>
        </h2>
        (禁止携带宠物)
      </div>
      <div class="item3-1">
        <span style="font-size: 20px; margin: 20px">登机时间</span>
        <div style="width: 1px; height: 60px; background: darkgray"></div>
        <h2 style="margin-left: 20px">{{ starTime }}</h2>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, toRef, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import url from "../../../common/js/APIUtil";

//路由
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();

//航班号数据
var result_data = reactive({ flightNumber: {} });
const flightNumber = toRef(result_data, "flightNumber");
var starTime = ref("");
var starDate = ref("");
var endDate = ref("");
var flightStatus = ref("");
var stateColor = reactive({color:''})

var loading = ref(true)

//路由数据
const searchAgain = reactive({
  flightNumber: '',
  upDate: ''
})

const getData = () => {
  proxy.$http.get(url.API_GET_flight + searchAgain.flightNumber).then((res) => {
    loading.value = true

    result_data.flightNumber = res.data.data;
    if (res.data.code == 400) {
      loading.value = false
      ElMessage.success(res.data.message);
    }
    if (result_data.flightNumber != null) {
      loading.value = false
      ElMessage.success(res.data.message);
      //设置登机时间
      let date = new Date("2000-01-01 " + result_data.flightNumber.starTime) - 1000 * 60 * 20;
      let hours = new Date(date).getHours()<10 ? '0'+new Date(date).getHours() : new Date(date).getHours()
      let minutes = new Date(date).getMinutes()<10 ? '0'+new Date(date).getMinutes() : new Date(date).getMinutes()
      starTime.value = hours + ":" + minutes
      //设置起飞降落日期
      starDate.value = searchAgain.upDate;
      endDate.value = searchAgain.upDate;
      let edTime = result_data.flightNumber.endTime;
      let isSecondDay = new Date("2000-01-01 " +result_data.flightNumber.endTime) < new Date("2000-01-01 " +result_data.flightNumber.starTime);
      if (isSecondDay) {
        let date = new Date(Date.parse(searchAgain.upDate.replace(/-/g, "/")) + 8.64e7)
        let day = date.getDate()<10 ? '0'+date.getDate() : date.getDate()
        let month = date.getMonth()+1<10 ? '0'+(date.getMonth()+1) : date.getMonth()+1
        endDate.value = date.getFullYear() +"-"+ month +"-"+ day
      }
      //航班状态
      let currentTime = new Date();
      if (new Date(endDate.value + " " + result_data.flightNumber.endTime) < currentTime) {
        flightStatus.value = "航班抵达";
        stateColor.color = '#808080	'
      } else if (new Date(starDate.value + " " + result_data.flightNumber.starTime) > currentTime) {
        flightStatus.value = "航班计划";
        stateColor.color = 'rgb(57, 177, 57)'
      } else {
        flightStatus.value = "航班起飞";
        stateColor.color = '#40E0D0	'
      }
      //起始时间更改
      result_data.flightNumber.starTime = result_data.flightNumber.starTime.slice(0, 5)
      result_data.flightNumber.endTime = result_data.flightNumber.endTime.slice(0, 5)
    } else {
      loading.value = false
      ElMessage.warning("未查询到航班，请修改条件重新查询");
    }
  });
}

watch(route, () => {
  if (route.path == '/index/flightdynamic/content') {
    searchAgain.flightNumber = route.query.flightNumber
    searchAgain.upDate = route.query.departureDate
    getData()
  }
}, { immediate: true })

</script>

<style scoped>
.item {
  margin-top: 50px;
  border-radius: 5px;
  width: 1300px;
  min-height: 500px;
  background-color: rgba(254, 254, 254, 0.5);
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 50%;
  margin-left: -650px;
}

.item1 {
  margin: 30px;
  position: relative;
}

.item2 {
  width: 700px;
  margin-top: 80px;
  margin-left: 50px;
  position: relative;
}

.item2-1 {
  margin: 5px;
  width: 700px;
  margin-bottom: 20px;
  position: relative;
}

.item3 {
  top: 200px;
  left: 880px;
  position: absolute;
}

.item3-1 {
  border: 1px solid #a9a9a9;
  border-radius: 4px;
  height: 80px;
  width: 360px;
  margin-bottom: 20px;
  position: relative;
  display: flex;
  align-items: center;
}

.font1 {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  font-size: 30px;
}

.font2 {
  position: absolute;
  right: 0%;
  top: 50%;
  margin-top: -20px;
  font-size: 30px;
}

.font3 {
  font-size: 22px;
}

.font4 {
  float: right;
  right: 0%;
  font-size: 22px;
}

.font5 {
  font-size: 18px;
}

.font6 {
  float: right;
  font-size: 18px;
}

.font7 {
  font-size: 40px;
}

.font8 {
  float: right;
  font-size: 40px;
}

.line {
  margin: 20px;
}

.loading {
  position: absolute;
  left: 41%;
  width: 200px;
  z-index: 9999;
}

.loading p {
  padding-left: 50px;
  font-size: 30px;
  color: rgba(0, 0, 0, 0.3);
}

.empty {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin: auto;
    margin-top: 50px;
    width: 1100px;
    height: 300px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 10%);
}
</style>